<template>
  <div class="bigbox">
      <div class="topbox">
        <div>
          <template>
            <el-select v-model="form.region" clearable   placeholder="通讯规约" @change="changefenlei"  size="medium" style="margin-right: 10px;">
              <el-option class="select" v-for="(item,index) in xlalalist" :key="index" :label="item.text" :value="item.value"></el-option>
            </el-select>
            <el-input  size="medium" @keyup.enter.native="changeinput" style="width: 300px;height: 32px;"
             v-model="input"  suffix-icon="el-icon-search" placeholder="请输入检索关键字"></el-input>
          </template>
        </div>
        <div><button class="button" @click="dialogVisible=true" style=" cursor: pointer;">新增</button></div>
      </div>
      <div class="tablebox">
        <template>
          <el-table
            :data="tableData"
            border
            highlight-current-row
            :header-cell-style="{background:'#f5f5f5','text-align':'center'}"
            style="width: 100%"
            height="calc(100% - 1px)">
            <el-table-column
              prop="typeCode"
              label="表计类型编码"
              >
            </el-table-column>
            <el-table-column
              prop="typeName"
              label="表计类型名称"
              >
            </el-table-column>
            <el-table-column
              prop="typeExplain"
              label="表计类型描述">
            </el-table-column>
            <el-table-column
              prop="channelTag"
              label="采集通道"
              >
              <template #default="{row}">
                <span>{{ 
                xlalalist.filter(ele=>ele.value==row.channelTag)[0].text
                 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="操作"
              align="center">
              <template #default="{row}">
              <span @click="xiugai(row)">
                <i
                  class="el-icon-edit"
                  style="color: skyblue; margin-left: 30px; cursor: pointer;"
                ></i
              ></span>
              <span @click="dellist(row)">
                <i
                  class="el-icon-delete"
                  style="color: red; margin-left: 30px; cursor: pointer;"
                ></i
              ></span>
            </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :showClose="false"
            >
            <div>
              <el-form :model="formdata"  label-width="140px" :rules="rules" ref="refform">
                <el-form-item label="采集通道:" prop="channelTag">
                  <el-select v-model="formdata.channelTag" placeholder="请选择采集通道" style="width: 250px;" size="mini" :disabled="isshow">
                    <el-option class="select" v-for="(item,index) in xlalalist" :key="index" :label="item.text" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="型号编码:" prop="typeCode" size="80" >
              <el-input v-model="formdata.typeCode" style="width: 250px;" size="mini" :disabled="isshow"></el-input>
            </el-form-item>
            <el-form-item label="型号名称:" prop="typeName">
              <el-input v-model="formdata.typeName" style="width: 250px;" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="型号描述:" prop="typeExplain">
              <el-input type="textarea" :rows="4" v-model="formdata.typeExplain" style="width: 250px;" size="mini"></el-input>
            </el-form-item>
              </el-form>
            </div>
            <span slot="footer" class="dialog-footer" style="margin-right: 60px;">
              <button class="dialogbutton sure" type="primary" @click="submit" style=" cursor: pointer;">确 定</button>
              <button class="dialogbutton" @click="quxiao" style=" cursor: pointer;">取 消</button>
            </span>
          </el-dialog>
      </div>
  </div>
</template>

<script>
import { getxialalistapi, getbiaojilistapi, postbiaojiapi, putbiaojiapi, delbiajiapi } from '@/api/ElectricalDistribution/IotTechnology/meter.js'
export default {
  name: 'MaintenanceIndex',

  data () {
    return {
      val: '',
      isshow: false,
      row: '',
      form: {},
      input: '',
      formdata: {},
      xlalalist: [],
      tableData: [],
      dialogVisible: false,
      rules: {
        channelTag: [
          { required: true, message: '采集通道必填', trigger: 'blur' }
        ],
        typeCode: [
          { required: true, message: '型号编码必填', trigger: 'blur' }
        ],
        typeName: [
          { required: true, message: '型号名称必填', trigger: 'blur' }
        ],
        typeExplain: [
          { required: true, message: '型号描述必填', trigger: 'blur' }
        ]
      }
    }
  },
  async mounted () {
    const res = await getxialalistapi()
    this.xlalalist = res.data.list
    this.getbiaojilist()
  },
  methods: {
    async getbiaojilist (val) {
      const res = await getbiaojilistapi({ channelTag: val })
      this.tableData = res.data.list
    },
    changeinput () {
      this.tableData = this.tableData.filter(ele => ele.typeName.indexOf(this.input) !== -1)
    },
    changefenlei (val) {
      this.val = val
      this.getbiaojilist(val)
    },
    async submit () {
      await this.$refs.refform.validate()
      const { typeCode, typeExplain, typeName } = this.formdata
      this.row ? await putbiaojiapi({ typeCode, typeExplain, typeName }) : await postbiaojiapi(this.formdata)
      this.row ? this.$message.success('修改成功') : this.$message.success('新增成功')
      this.getbiaojilist(this.val)
      this.row = null
      this.dialogVisible = false
      this.formdata = {}
      this.isshow = false
    },
    quxiao () {
      this.$refs.refform.clearValidate()
      this.dialogVisible = false
      this.row = null
      this.formdata = {}
      this.isshow = false
    },
    xiugai (row) {
      this.row = row
      this.dialogVisible = true
      this.formdata = { ...row }
      this.isshow = true
    },
    dellist (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delbiajiapi({ typeCode: row.typeCode })
        if (res.code === 200) {
          this.$message.success('删除成功')
        }
        this.getbiaojilist(this.val)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  watch: {
    input (val) {
      if (!val) {
        this.getbiaojilist(this.val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.bigbox{
  padding: 10px;
  background-color: #f1f1f1;
  height: 100%;
}
.tablebox{
  background-color: #fff;
  padding: 10px;
  height: calc(100% - 90px);
}
.select{
  padding-left: 10px;
}
.topbox{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  background-color: #fff;
  padding: 20px;
  height: 80px;
}
.button{
  width: 63px;
  height: 32px;
  border-radius: 3px;
  color: #fff;
  border: 1px solid #ccc;
  background-color: #1890ff;
}
.dialogbutton{
  width: 63px;
  height: 32px;
  border: 1px solid #ccc;
  border-radius: 7px;
  background-color: #fff;
}
.sure{
  background-color: #169bd5;
  color: #fff;
  margin-right: 10px;
}
</style>
